<template>
  <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-divider orientation="left">
      将所选字段选项以列表的形式显示在视图左侧，帮助用户快速查看记录，支持选项、关联记录和级联选择字段。
    </a-divider>
    <a-form-model-item label="筛选字段">
      <a-select
        v-model="option.field"
        placeholder="请选择字段"
        @change="displayTypeChange"
      >
        <a-select-option
          v-for="sitem in field.filter((f) =>
            [eipZeroCodeControl.radio, eipZeroCodeControl.select].includes(
              f.type
            )
          )"
          :key="sitem.key"
          :value="sitem.key"
          >{{ sitem.label }}</a-select-option
        >
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="显示项">
      <a-select
        v-model="option.displayType"
        placeholder="请选择字段"
        @change="displayTypeChange"
      >
        <a-select-option
          v-for="sitem in displayType"
          :key="sitem.key"
          :value="sitem.key"
          >{{ sitem.label }}</a-select-option
        >
      </a-select>
      <a-select
        v-if="option.displayType == 'appoint'"
        placeholder="请选择指定项"
        mode="multiple"
        v-model="option.display"
        show-search
      >
        <a-select-option
          v-for="sitem in display"
          :key="sitem.value"
          :value="sitem.value"
          >{{ sitem.label }}</a-select-option
        >
      </a-select>
      <a-checkbox>显示“全部”项</a-checkbox>
      <a-checkbox>显示“空”项</a-checkbox>
    </a-form-model-item>
    <a-form-model-item label="排序方式">
      <a-select> </a-select>
    </a-form-model-item>
    <a-form-model-item label="默认宽度">
      <a-select> </a-select>
    </a-form-model-item>
    <a-form-model-item label="设置">
      <a-checkbox
        >创建记录时，以选中列表作为默认值
        <a-tooltip
          title="如：在商品表中以商品类型（生鲜、副食、饮料等）作为筛选列表时，如果当前选中了饮料分类，则创建记录时商品类型默认为饮料。"
        >
          <a-icon type="question-circle-o" />
        </a-tooltip>
      </a-checkbox>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
      displayType: [
        { key: "all", label: "全部" },
        { key: "haveData", label: "显示有数据的项" },
        { key: "appoint", label: "显示指定项" },
        { key: "filter", label: "显示筛选条件的项" },
      ],
      display: [],
    };
  },
  props: {
    option: {
      type: Object,
    },
    field: {
      type: Array,
    },
  },
  created() {
    this.displayTypeChange();
  },
  methods: {
    displayTypeChange() {
      if (this.option.displayType == "appoint" && this.option.field) {
        let o = this.$utils.find(this.field, (f) => f.key == this.option.field);
        this.display = o.options.options;
      }
    },
  },
};
</script>

<style scoped></style>
